import { useRequest } from 'ahooks';
import {
  Button, Card, List, message, Popconfirm, Skeleton
} from 'antd';
import { useCallback, useEffect, useState } from 'react';

import InsertModal from './insert-modal';
import checkoutCard from './hooks';

interface ListProps {
  title: string,
  questionnaireUuid: string | undefined,
  handleAlter: () => void
}
export default ({ title, questionnaireUuid, handleAlter }: ListProps) => {
  if (!questionnaireUuid) {
    return <Skeleton active />;
  }

  const [isModalShow, setIsModalShow] = useState<boolean>(false);
  const [dataSource, setDataSource] = useState<Questionnaire.CardItem[]>([]);
  const url = checkoutCard(title);

  /**
   * 获取基本信息选项配置数据
   */
  const {
    run: requestSelectionOptionList,
    loading: getLoading
  } = useRequest((questionnaireUuidParam: string) => ({
    url,
    method: 'GET',
    params: {
      uuid: questionnaireUuidParam
    }
  }), {
    onSuccess: (res) => {
      const { tableData } = res.data;
      setDataSource(tableData);
    },
    onError: () => {
      console.log('onError');
    },
    manual: true
  });

  useEffect(() => {
    if (questionnaireUuid) {
      requestSelectionOptionList(
        questionnaireUuid
      );
    }
  }, []);

  /**
   * 删除配置项
   */
  const {
    run: requestDelete,
    loading: deleteLoading
  } = useRequest((uuid: string) => ({
    url,
    method: 'DELETE',
    data: {
      uuid,
      questionnaireUuid,
    }
  }), {
    manual: true,
    onSuccess: () => {
      handleAlter();
    },
    onError: () => {
      message.error('删除失败');
    }
  });

  const handleDelete = useCallback(async (
    optionUuid: string,
    questionnaireUuidParam: string
  ) => {
    await requestDelete(optionUuid);
    await requestSelectionOptionList(questionnaireUuidParam);
  }, []);

  const handleCreate = useCallback(
    async () => requestSelectionOptionList(questionnaireUuid),
    []
  );

  return (
    <>
      <Card
        title={title}
        size="default"
        extra={(
          <Button
            type="primary"
            onClick={() => { setIsModalShow(true); }}
          >
            添加
          </Button>
        )}
      >
        <List
          size="small"
          itemLayout="horizontal"
          dataSource={dataSource}
          pagination={{
            pageSize: 3,
          }}
          loading={getLoading || deleteLoading}
          renderItem={(item: any) => (
            <List.Item
              actions={[
                <Popconfirm
                  title="删除后该数据无法找回！是否删除?"
                  onConfirm={() => {
                    handleDelete(item.uuid, questionnaireUuid);
                  }}
                  okText="确定"
                  cancelText="取消"
                >
                  <Button
                    type="link"
                  >
                    删除
                  </Button>
                </Popconfirm>
              ]}
            >
              <div>{item.name}</div>
            </List.Item>
          )}
        />
      </Card>
      <InsertModal
        isModalShow={isModalShow}
        setIsModalShow={setIsModalShow}
        url={url}
        handleCreate={handleCreate}
        questionnaireUuid={questionnaireUuid}
      />
    </>
  );
};
